﻿@model KidChoreApp.Web.Models.KidDetailVM

<h2>@Model.Kid.Name 's Responsibility Details</h2>

<div class="jumbotron">
    <div>@Model.Kid.Name</div>
    <div>Grade: @Model.Kid.Grade</div>
    <div>Teacher: @Model.Kid.Teacher</div>
    <button class="btn btn-primary btn-sm" onclick="location.href='/Kid/AddChoreToKid/@Model.Kid.Id'">Add Chore For Child</button>
</div>

<h4>List Of Chores For @Model.Kid.Name</h4>
<table class="table table-hover table-striped">
    <tr>
        <th>Chore</th>
        <th colspan="2">Room</th>
    </tr>
    @foreach (var c in @Model.Chores)
    {
        <tr onclick="location.href='/Chore/ChoreDetail/@c.Id'">
            <td>@c.Name</td>
            <td>@c.Room</td>
            <td>
                <form method="post" action="/Kid/RemoveChoreFromKid">
                    <input type="hidden" name="kidId" value="@Model.Kid.Id" />
                    <input type="hidden" name="choreId" value="@c.Id" />
                    <input type="submit" value="X" class="btn btn-danger btn-sm" />
                </form>
            </td>
        </tr>
    }
</table>

<div>
    <button class="btn btn-primary btn-sm" onclick="location.href='/Kid/EditKid/@Model.Kid.Id'">Edit Child</button>
    <button class="btn btn-primary btn-sm" onclick="location.href='/Kid/DeleteKid/@Model.Kid.Id'">Delete Child</button>
</div>